
<template>
  <div>
    <div>首页</div>
    <div>
      <div>
        <template v-for="(item,index) in specifications">
         <div :key="index">
           <span>{{item.name}}</span>
           <!--  -->
           <button v-for="(sub,i) in item.list" :key="i" @click="handleSelect(item.name,sub)"
           :disabled="not_allowed_buttons.includes(`${item.name}-${sub}`)" :class="now_select[item.name]==sub?'active':''">{{sub}}</button>
         </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // skus:[
        //   {'skuno':'9527','attr':{'颜色':'黑色','版本':'标准版','内存':'128G'},'stock':'12','price':'79'},
        //   {'skuno':'8527','attr':{'颜色':'黑色','版本':'NFC版','内存':'128G'},'stock':'99','price':'91'},
        //   {'skuno':'8527','attr':{'颜色':'黑色','版本':'NFC版','内存':'256G'},'stock':'99','price':'91'},
        //   {'skuno':'7527','attr':{'颜色':'红色','版本':'标准版','内存':'128G'},'stock':'11','price':'8'},
        //   {'skuno':'6527','attr':{'颜色':'红色','版本':'NFC版','内存':'128G'},'stock':'12','price':'80'},
        //   {'skuno':'6527','attr':{'颜色':'红色','版本':'NFC版','内存':'256G'},'stock':'12','price':'80'},
        //   {'skuno':'7527','attr':{'颜色':'蓝色','版本':'标准版','内存':'128G'},'stock':'11','price':'8'},
        //   {'skuno':'6527','attr':{'颜色':'蓝色','版本':'NFC版','内存':'128G'},'stock':'12','price':'80'},
        //   {'skuno':'6527','attr':{'颜色':'蓝色','版本':'NFC版','内存':'256G'},'stock':'12','price':'80'},
        // ],
        skus:[
          {'skuno':'UU050787','attr':{'颜色':'黑色','大小':'XL','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
          {'skuno':'HH150789','attr':{'颜色':'红色','大小':'L','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
          {'skuno':'LL250786','attr':{'颜色':'黑色','大小':'S','款式':'长款','品牌':'耐克'},'stock':'12','price':'79'},
          {'skuno':'DD350788','attr':{'颜色':'蓝色','大小':'XL','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
        ],
        specifications:[
          // {
          //   name:'颜色',
          //   list:['黑色','红色','蓝色','紫色']
          // },
          // {
          //   name:'版本',
          //   list:['标准版','NFC版']
          // },
          // {
          //   name:'内存',
          //   list:['128G','256G']
          // }
          {
            name:'颜色',
            list:['黑色','红色','蓝色']
          },
          {
            name:'款式',
            list:['短款','长款']
          },
          {
            name:'品牌',
            list:['阿迪','耐克']
          },
          {
            name:'大小',
            list:['S','L','XL','XXL']
          }
        ],
        matched_skus:[] , // 匹配的数组
        allowed_buttons:[] ,//所有可选
        not_allowed_buttons:[],//不允许点击
        now_select:{}, //当前选中的属性
        selected_buttons:[], //已选择的按钮
        not_selected_buttons:[], //未选择的按钮
        is_all_select:false,

      }
    },
    created () {
       this.matched_skus=this.skus
      this.caculate_button(this.skus,this.specifications,this.now_select)
    },
    methods: {
      handleSelect(name,value){
        this.now_select[name]=value
        this.caculate_button(this.skus,this.specifications,this.now_select)
      },

      caculate_button(skus,attr_array,now_select){
        this.is_all_select=this.isComplete()
        if(this.is_all_select){
          console.log('----------所有属性选择完成----------')
          let [selected_buttons,not_selected_buttons] =this.selected_or_not_buttons(attr_array,now_select)
          let almost_matched_skus_array = this.almost_matched_skus(skus,now_select);
          let can_use_buttons = this.get_can_use_buttons(almost_matched_skus_array);
          let can_not_use_buttons=this.array_diff(not_selected_buttons,can_use_buttons)
          console.log('可选按钮',can_use_buttons);
          console.log('不可选按钮',can_not_use_buttons);
          this.not_allowed_buttons=can_not_use_buttons
        }else{
          console.log('----------属性没有选择完成----------')
          let [selected_buttons,not_selected_buttons] =this.selected_or_not_buttons(attr_array,now_select)
          this.not_allowed_buttons=[...this.not_allowed_buttons,...not_selected_buttons]
          let matched_skus_array = this.matched_skus_FN(skus,now_select);
          let can_use_buttons = this.get_can_use_buttons(matched_skus_array);
          let can_not_use_buttons=this.array_diff(this.not_allowed_buttons,can_use_buttons)
          can_use_buttons = this.array_diff(not_selected_buttons,this.not_allowed_buttons);
          console.log('可选按钮',can_use_buttons);
          console.log('不可选按钮',can_not_use_buttons);
          this.not_allowed_buttons=[...can_not_use_buttons]
        }
        
      },

      matched_skus_FN(skus,now_select){
       let keys=Object.keys(now_select)
       let matched_skus_array= skus.filter(item=>{
          return keys.every(key => now_select[key].indexOf(item.attr[key]) > -1)
        })
        console.log('matched_skus:',matched_skus_array)

        return matched_skus_array
      },
      almost_matched_skus(skus,now_select){
        let matched_skus_array = [];
        skus.forEach(item=>{
            //已选属性 匹配 sku
            let not_match_number = 0;
            for(var key in now_select){
                if(item.attr[key] != now_select[key]){
                    not_match_number = not_match_number+1;
                }
            }
            if(not_match_number==1 && item.stock>0){
                matched_skus_array.push(item);
            }
        });
        console.log('almost_matched_skus::',matched_skus_array)
        return matched_skus_array
      },
      get_can_use_buttons(skus){
        let can_use_buttons=[]
        skus.forEach(item => {
          for(var key in item.attr){
                can_use_buttons.push(key+'-'+item.attr[key]);
            }
        });
        can_use_buttons=[...new Set(can_use_buttons)]
        return can_use_buttons
        // this.selected_buttons=arr
        // console.log('已确定属性可选按钮：',this.selected_buttons)

        // this.not_allowed_buttons=this.allowed_buttons.filter(v=>{ return this.selected_buttons.indexOf(v) == -1 })
        // this.not_allowed_buttons=this.allowed_buttons.concat(this.selected_buttons).filter(v => !this.allowed_buttons.includes(v) || !this.selected_buttons.includes(v))
        // console.log('差集-不可选',this.not_allowed_buttons)
        // let  c = this.allowed_buttons.filter(v => this.selected_buttons.includes(v))
        // console.log('交集',c)
        // let f  = this.allowed_buttons.concat(b.filter(v => !a.includes(v)))
        // console.log("并集",f)
      },
      
      

      selected_or_not_buttons(attr_array,now_select){
        console.log('选中的按钮：', now_select);
        let all=[]
        let selected_buttons = []
        let not_selected_buttons = []
        if(this.is_all_select){
           attr_array.forEach(item=>{
            item.list.forEach(el=>{
              all.push(item.name+'-'+el)
            })
          })
        }else{
          attr_array.forEach(item=>{
            if(now_select[item.name]==undefined){
              item.list.forEach(el=>{
                all.push(item.name+'-'+el)
              })
            }
            
          })
        }
        for (var key in now_select) {
           selected_buttons.push(key + '-' + now_select[key]);
        }
        console.log('所有按钮', all);
        not_selected_buttons = this.array_diff(all,selected_buttons);
        console.log('除去当前选区的所有按钮',all);
        console.log('已选按钮',selected_buttons);
        console.log('未选按钮',not_selected_buttons);
        return [selected_buttons,not_selected_buttons];
      },
      isComplete(){
        let now_select_len=Object.keys(this.now_select).length
        let attr_len= this.specifications.map(item=>item.name).length
        if(now_select_len===attr_len){
          return true
        }else{
         return false
        }
      },
      array_diff(aArr,bArr){ //第一个数组减去第二个数组
    　　if(bArr.length==0){return aArr}
    　　var diff=[];
    　　var str=bArr.join("&quot;&quot;");
    　　for(var e in aArr){
    　　if(str.indexOf(aArr[e])==-1){
    　　　　diff.push(aArr[e]);
    　　　　}
    　　}
    　　return diff;
      }
    }
    
  }
</script>

<style  scoped>
.active{
  background-color: red;
}
</style>
